<template>
	<view>
		<view class="list">
			<picker class="picker" mode="multiSelector" :range="region" range-key="name" :value="regionIndex" @change="pickerChange" @columnchange="pickerColumnchange">
				<view class="form-column-picker flex">
					<input v-if="regionStr" type="text" :value="regionStr" disabled="true" :placeholder="placeholderStr" placeholder-class="placeholder">
					<input v-else type="text" :value="regionInfo" disabled="true" :placeholder="placeholderStr" placeholder-class="placeholder">
					<image class="icon" src="/static/circle/right.png" mode="aspectFit"></image>
				</view>
			</picker>
		</view>
	</view>
</template>

<script>
	import region from './pca-code.json';
	export default {
		data() {
			return {
				// 原数组
				oldRegion: region,
				// 处理后的数组
				region: [
					[],
					[],
					[]
				],
				// 选择省市区的下标Index  传则默认选中传递的
				regionIndex: [0, 0, 0],

				// 选择的id
				// previnceName: 11,
				// cityName: 1101,
				// countyName: 110101,

				// 省市区字符串
				regionStr: '',
				regionInfo: ''
			};
		},
		props: {
			// 省name
			previnceName: {
				type: [String],
				default: "北京市"
			},
			// 城市name
			cityName: {
				type: [String],
				default: "市辖区"
			},
			// 县区name
			countyName: {
				type: [String],
				default: "东城区"
			},
			// 是否是为修改(true为修改)
			isRevise: {
				type: [Boolean],
				default: false
			},
			regionSel: {
				type: [Object],
			},
			placeholderStr: {
				type: [String],
			}
		},
		watch: {
			regionSel: {
				handler(newName, oldName) {
					if(newName && newName.prevince) {
						this.regionInfo = newName.prevince + " " + newName.city + " " + newName.area
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			pickerChange(e) {
				// console.log(e, '1');
				this.regionIndex = e.detail.value;
				this.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]].name + ' ' +
					this.region[2][this.regionIndex[2]].name;
					
				// 组件传值
				this.$emit('region', this.region[0][this.regionIndex[0]].name,this.region[1][this.regionIndex[1]].name,this.region[2][this.regionIndex[2]].name);
			},
			pickerColumnchange(e) {
				// console.log(e);
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)

				if (e.detail.column === 0) {
					// 声明城市数组
					let cityArr = [];
					let countyArr = [];
					// 设置下标
					this.regionIndex = [e.detail.value, 0, 0];
					// 改变城市列表
					this.region[1] = this.oldRegion[e.detail.value].children.map(item => {
						cityArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 1, cityArr);
					// 改变县区列表
					this.oldRegion[e.detail.value].children[0].children.map(item => {
						countyArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 2, countyArr);
				}
				if (e.detail.column === 1) {
					this.regionIndex[1] = e.detail.value;
					this.regionIndex[2] = 0;
					let countyArr = [];
					this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]].children.map(item => {
						countyArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 2, countyArr);
				}
				if (e.detail.column === 2) {
					this.regionIndex[2] = e.detail.value;
				}
			}
		},
		created() {
			let provinceArr = [];
			let cityArr = [];
			if(this.previnceName == false && this.cityName == false && this.countyName == false){
				this.previnceName = "北京市"
				this.cityName = "市辖区"
				this.countyName = "东城区"
				console.log("ABC");
			}
			this.oldRegion.map((item, index) => {
				this.region[0].push({
					name: item.name,
					code: item.code
				});
				console.log(this.previnceName);
				if (this.previnceName == item.name) {
					provinceArr = item.children;
					this.regionIndex[0] = index;
				}
				console.log("A");
			})
			console.log("B");
			console.log(provinceArr);
			provinceArr.map((item, index) => {
				this.region[1].push({
					name: item.name,
					code: item.code
				});
				if (this.cityName == item.name) {
					cityArr = item.children;
					this.regionIndex[1] = index;
				}
			})
			cityArr.map((item, index) => {
				this.region[2].push({
					name: item.name,
					code: item.code
				});
				if (this.countyName == item.name) {
					this.regionIndex[2] = index;
				}
			})
			if (this.isRevise) {
				this.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]].name + ' ' +
					this.region[2][this.regionIndex[2]].name;
			} else {
				this.regionStr = '';
			}
		}
	}
</script>

<style lang="scss">
	.list {
		input {
			font-size: 28rpx;
			line-height: 40rpx;
			flex: 1;
		}
		
		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-left: 24rpx;
		}
		
		.placeholder {
			font-size: 28rpx;
			line-height: 40rpx;
			color: #666666;
		}
	}
</style>
